<template>
	<view class="container">
		<view class="order-detail">
			<view class='delivery-addr'>
				<view class='user-info'>
					<text class='item'>{{data.userAddrDto.receiver}}</text>
					<text class='item'>{{data.userAddrDto.mobile}}</text>
				</view>
				<view class='addr'>
					{{`${data.userAddrDto.province}${data.userAddrDto.city}${data.userAddrDto.area}${data.userAddrDto.addr}`}}
				</view>
			</view>
			<!-- 商品信息 -->
			<view class='item-cont' v-for="(item, index) in data.orderItemDtos" :key="index" @click="toDetails(item)">
				<view class="prod-pic">
					<img :src="item.pic" alt="">
				</view>
				<view class="prod-info">
					<view class="prodname">{{item.prodName}}</view>
					<view class='prod-info-cont'>
						<text class='number'>数量：{{item.prodCount}}</text>
						<text class='info-item'>{{item.skuName}}</text>
					</view>
					<view class='price-nums clearfix'>
						<text class='prodprice'>
							<text class='symbol'>￥</text>
							<text class='big-num'>{{item.price.toFixed(2)}}</text>
						</text>
						<view class='btn-box'>
							<text class='btn' v-if="item.status!=1">申请售后</text>
							<text class='btn'>加购物车</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息排版 -->
			<view class='order-msg'>
				<view class='msg-item'>
					<view class='item'>
						<text class='item-tit'>订单编号：</text>
						<text class='item-txt'>{{orderNumber}}</text>
						<text class='copy-btn'>复制</text>
					</view>
					<view class='item'>
						<text class='item-tit'>下单时间：</text>
						<text class='item-txt'>{{data.createTime}}</text>
					</view>
				</view>
				<view class='msg-item'>
					<view class='item'>
						<text class='item-tit'>支付方式：</text>
						<text class='item-txt'>微信支付</text>
					</view>
					<view class='item'>
						<text class='item-tit'>配送方式：</text>
						<text class='item-txt'>普通配送</text>
					</view>
					<view class='item'>
						<text class='item-tit'>订单备注：</text>
						<text class='item-txt'>{{data.remarks}}</text>
					</view>
				</view>
			</view>
			<view class='order-msg'>
				<view class='msg-item'>
					<view class='item'>
						<view class='item-tit'>订单总额：</view>
						<view class='item-txt price'>
							<text class='symbol'>￥</text>
							<text class='big-num'>{{data.orderItemDtos[0].productTotalAmount.toFixed(2) }}</text>

						</view>
					</view>
					<view class='item'>
						<view class='item-tit'>运费：</view>
						<view class='item-txt price'>
							<text class='symbol'>￥</text>
							<text class='big-num'>{{data.transfee}}</text>
						</view>
					</view>
					<view class='item'>
						<view class='item-tit'>优惠券：</view>
						<view class='item-txt price'>
							<text class='symbol'>-￥</text>
							<text class='big-num'>{{data.reduceAmount}}</text>

						</view>
					</view>
					<view class='item payment'>
						<!-- <view class='item-txt price'>
							实付款：
							<text class='symbol'>￥</text>
							<text class='big-num'>{{data.actualTotal.toFixed(2)}}</text>

						</view> -->
					</view>
				</view>
			</view>
			<!-- 底部排版 -->
			<view class="order_details_footer">
				<text class='dele-order-btn' v-if="data.status==5||data.status==6">删除订单</text>
				<view>
					<button class="btn1" open-type="contact">联系客服</button>
					<button class="btn2">再次购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				data: {},
			}
		},
		onLoad: function(option) {
			const item = option.item
			this.init(item);
		},
		methods: {
			init(item) {
				request({
					url: `/p/myOrder/orderDetail?orderNumber=${item}`,
					methods: "GET",
				}).then(res => {
					this.data = res;
				})
			}
		},
	}
</script>

<style lang="css">
	page {
		background: #f4f4f4;
	}

	.order-detail {
		margin-bottom: 120rpx;
	}

	.order-detail .delivery-addr {
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.order-detail .delivery-addr .user-info {
		line-height: 48rpx;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.order-detail .delivery-addr .user-info .item {
		font-size: 28rpx;
		margin-right: 30rpx;
		vertical-align: top;
		display: inline-block;
	}

	.order-detail .delivery-addr .addr {
		font-size: 26rpx;
		line-height: 36rpx;
		color: #999;
	}

	/* 商品列表 */

	.prod-item {
		background-color: #fff;
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.item-cont .prod-pic img {
		width: 180rpx;
		height: 180rpx;
	}

	.item-cont {
		background: #fff;
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-top: 2rpx solid #f1f1f1;
		margin-top: 15rpx;
	}

	.item-cont .prod-pic {
		font-size: 0;
		display: block;
		width: 160rpx;
		height: 160rpx;
		overflow: hidden;
		background: #fff;
		margin-right: 16rpx;
	}

	.item-cont .prod-pic image {
		width: 100%;
		height: 100%;
	}

	.item-cont .prod-info {
		margin-left: 10rpx;
		font-size: 28rpx;
		width: 100%;
		height: 80px;
		flex: 1;
	}

	.item-cont .prod-info .prodname {
		font-size: 28rpx;
		line-height: 40rpx;
		max-height: 86rpx;
		overflow: hidden;
		/* 文字超长省略 */
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.item-cont .prod-info .prod-info-cont {
		color: #999;
		margin-top: 10rpx;
		font-size: 24rpx;
	}

	.item-cont .prod-info .prod-info-cont .info-item {
		color: red;
		height: 28rpx;
		margin-top: 10rpx;
		font-size: 24rpx;
		overflow: hidden;
		/* 文字超长省略 */
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-break: break-all;
		width: 70%;
	}

	.item-cont .prod-info .prod-info-cont .number {
		float: left;
		margin-right: 20rpx;
	}

	.price-nums {
		margin-top: 30rpx;
	}

	.price-nums .prodprice {
		color: #333;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		float: left;
	}

	.price-nums .btn-box {
		float: right;
		text-align: right;
	}

	.price-nums .btn-box .btn {
		padding: 6rpx 30rpx;
		line-height: 36rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		display: inline-block;
		border: 2rpx solid #e4e4e4;
		border-radius: 50rpx;
	}

	/* 
	订单信息 */
	.order-msg {
		background: #fff;
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.order-msg .msg-item {
		padding: 20rpx;
		border-top: 2rpx solid #f1f1f1;
	}

	.order-msg .msg-item:first-child {
		border: 0;
	}

	.order-msg .msg-item .item {
		display: flex;
		padding: 10rpx 0;
		align-items: center;
	}

	.order-msg .msg-item .item.payment {
		border-top: 2rpx solid #f1f1f1;
		color: #eb2444;
		padding-top: 30rpx;
	}

	.order-msg .msg-item .item .item-tit {
		color: #999;
		line-height: 48rpx;
	}

	.order-msg .msg-item .item .item-txt {
		flex: 1;
		line-height: 48rpx;
	}

	.order-msg .msg-item .item .copy-btn {
		display: block;
		margin-left: 20rpx;
		border: 2rpx solid #e4e4e4;
		padding: 6rpx 24rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		line-height: 28rpx;
	}

	.order-msg .msg-item .item .item-txt.price {
		text-align: right;
	}

	/* 底部 */
	.order_details_footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		max-width: 750rpx;
		background: #fff;
		margin: auto;
		padding: 22rpx 10rpx;
		font-size: 26rpx;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
	}

	.order_details_footer view {
		float: right;
		margin-right: 30rpx;
	}

	.order_details_footer .btn1 {
		padding: 6rpx 30rpx;
		line-height: 36rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		display: inline-block;
		border: 2rpx solid #e4e4e4;
		border-radius: 50rpx;
	}

	.order_details_footer .btn2 {
		background-color: #EB2444;
		padding: 6rpx 30rpx;
		line-height: 36rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		display: inline-block;
		border-radius: 50rpx;
		color: #fff;
	}

	.dele-order-btn {
		padding: 6rpx 30rpx;
		line-height: 36rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
		display: inline-block;
	}
</style>
